<template>
    <view class="rank-goods" v-if="list.length">
        <view class="rank-goods__header">
            <text class="label">天天特价</text>
            <button class="rank-goods__more-btn" @tap="toMore">查看更多</button>
        </view>

        <view class="rank-goods__container">
            <view class="rank-goods__item" v-for="(item, index) in list" :key="item.id">
                <goods-item :index="index" :item="item" is-new type="bdhw" margin-bottom="0" />
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
import Buy from '@/mixins/buy';
import GoodsItem from '../goods-item';

export default {
    components: {
        GoodsItem
    },

    data() {
        return {
            list: []
        };
    },

    mixins: [Buy],

    computed: {
        ...mapGetters(['userInfo'])
    },

    created() {
        this.refresh();
    },

    methods: {
        toMore() {
            uni.reportAnalytics('click_bdhh', {});
            this.$_router.push('/pages/index/rank');
        },

        refresh() {
            this.$service.wxjlj
                .page({
                    page: 1,
                    size: 3,
                    isTopList: 1
                })
                .then(res => {
                    if (res) {
                        this.list = res.list;
                    }
                });
        },

        toDetail({ id, hasBuy, jljLink }) {
            this.$root.openRP(() => {
                if (hasBuy) {
                    this.$sdk.api('jdtrade', {
                        url: jljLink
                    });
                } else {
                    uni.showLoading({
                        title: '加载中'
                    });

                    this.$service.jingdong
                        .createShortUrlForActivity({
                            mdId: id,
                            channelId: this.userInfo.channelId
                        })
                        .then(async res => {
                            uni.hideLoading();
                            this.refresh();
                            this.$sdk.api('jdtrade', {
                                url: res
                            });
                        })
                        .catch(err => {
                            uni.hideLoading();
                            uni.showToast({
                                title: err,
                                icon: 'none'
                            });
                        });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.rank-goods {
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 16rpx;

    &__header {
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        height: 80rpx;
        background-image: linear-gradient(to bottom, #e2dfff, #fff);
        border-radius: 16rpx 16rpx 0 0;

        .label {
            color: #1d1d1d;
            font-size: 32rpx;
            font-weight: 500;
            margin-right: 20rpx;
        }
    }

    &__more-btn {
        background-color: transparent;
        position: absolute;
        right: 20rpx;
        color: #4332c4;
        font-size: 24rpx;

        &::after {
            border: 0;
        }
    }

    &__container {
        margin: 0rpx -20rpx;
    }
}
</style>
